import React, { useState, useMemo, useEffect } from 'react';
import styles from './serachInput.less';
import Serach from '../../images/serach';
/**
 * props.setSerachFocus:Function 子组件与父组件通信 通知input框的focus状态
 */
export default (props: { onFocus: Function; onBlur: Function; styles?: Object }) => {
  const [serachFocus, setSerachFocus] = useState<boolean>(false);

  const styleProp = useMemo(() => {
    if (props.styles) {
      return props.styles;
    } else {
      return {};
    }
  }, [props.styles]);

  return (
    <React.Fragment>
      <label
        className={`${styles['serach-label']} ${styles['SearchBar-input']} ${
          serachFocus ? styles['SearchBar-focusedInput'] : ''
        }`}
        style={styleProp}
      >
        <input
          type="text"
          onFocus={e => {
            e.preventDefault();
            props.onFocus(true);
            setSerachFocus(true);
          }}
          onBlur={e => {
            e.preventDefault();
            props.onBlur(false);
            setSerachFocus(false);
          }}
          placeholder="umi typeScript"
        />
        <button type="button" onClick={() => {}}>
          <span className={`${serachFocus ? styles.serachOnfocus : ''} ${styles.serachIcon}`}>
            <Serach></Serach>
          </span>
        </button>
      </label>
    </React.Fragment>
  );
};
